<template>
	<div>
		<div class="oper-form" :class="operateType === 'check' ? 'disabled' : ''">
			<a-form-model
				ref="form"
				:model="form"
				:rules="rules"
				:label-col="labelCol"
				:wrapper-col="wrapperCol"
			>
				<a-form-model-item label="分群名称" prop="crowdName">
					<a-input v-model="form.crowdName" placeholder="请输入内容" />
				</a-form-model-item>
				<div :class="operateType === 'edit' ? 'disabled' : ''">
					<a-form-model-item label="种子人群" prop="llType">
						<a-icon class="tip-icon" type="question-circle" />
						<a-radio-group v-model="form.llType">
							<a-radio :value="1">
								<span>选择已有人群作为种子人群</span>
							</a-radio>
							<a-radio :value="2">
								<span>上传imei作为种子人群</span>
							</a-radio>
						</a-radio-group>
					</a-form-model-item>
					<div class="step-wrap">
						<a-form-model-item label=" " v-if="form.llType == '1'">
							<a-select v-model="form.llCrowdId" placeholder="请选择种子人群">
								<a-select-option
									v-for="crowd in crowds"
									:key="crowd.id"
									:value="crowd.id"
									:label="crowd"
								>
									{{ crowd.crowdName }}
								</a-select-option>
							</a-select>
						</a-form-model-item>
						<a-form-model-item label=" " v-if="form.llType == '2'">
							<div class="step1">
								<div>step1:下载模板</div>
								<div class="step-load" @click="downloadTemplate">
									<a-icon type="file-sync" />
									<span class="load-text">下载</span>
								</div>
							</div>
							<div class="step2">
								<div>step2:上传文件</div>
								<div class="step-upload">
									<a-upload-dragger
										name="file"
										accept=".txt"
										:multiple="false"
										:before-upload="beforeUpload"
										:remove="removeFile"
										@reject="errorType"
									>
										<p class="ant-upload-drag-icon">
											<a-icon type="cloud-upload" />
										</p>
										<p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
									</a-upload-dragger>
								</div>
							</div>
						</a-form-model-item>
					</div>
					<a-form-model-item label="输出人群范围" prop="llContain">
						<a-radio-group v-model="form.llContain">
							<a-radio :value="1">
								<span>包含种子人群</span>
							</a-radio>
							<a-radio :value="2">
								<span>不包含种子人群</span>
							</a-radio>
						</a-radio-group>
					</a-form-model-item>
					<a-form-model-item label="输出人群数量" prop="llMultiple">
						<div class="out-number">
							<span>是种子人群数量</span>
							<a-input
								v-model.number="form.llMultiple"
								class="input-leng-m"
								placeholder="请输入数值"
							/>
							<span>倍</span>
						</div>
						<p>输出的人群数越大，则与种子用户相似度越低，输出不低于种子人群数量</p>
					</a-form-model-item>
				</div>

				<div class="footer-btn" v-if="operateType !== 'check'">
					<a-spin :spinning="loading">
						<a-button class="cancel-btn" @click="closeSelf">取消</a-button>
						<a-button type="primary" @click="onSubmit">保存</a-button>
					</a-spin>
				</div>
			</a-form-model>
		</div>
	</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import {
	lookLikeCrowd,
	lookLikeCrowdList,
	downloadLLTemplate,
	getUserCrowdInfo,
	userCrowdSave
} from '@/api/userGroup'
import { nameLength } from '../model'
@Component({
	name: 'LookAlive',
	components: {}
})
export default class LookAlive extends Vue {
	@Prop() operateType!: string
	@Prop() userCrowdId!: string
	labelCol = { span: 4 }
	wrapperCol = { span: 14 }
	headers = {
		authorization: 'authorization-text'
	}
	public form: any = {
		uploadFile: null,
		projectId: '',
		crowdName: '',
		llType: 1,
		llCrowdId: '',
		llContain: 1,
		llMultiple: ''
	}
	rules = {
		crowdName: [
			{ required: true, message: '请输入分群名称', trigger: 'blur' },
			{ validator: nameLength, trigger: 'blur' }
		],
		ll_type: [{ required: true, message: '请选择种子人群', trigger: 'blur' }],
		llContain: [{ required: true, message: '请选择输出人群范围', trigger: 'blur' }],
		llMultiple: [{ required: true, message: '请输入输出人群数量', trigger: 'blur' }]
	}
	crowds: Array<any> = []
	editSaveParmas: any = {}
	loading = false
	created() {
		if (this.operateType !== 'create') {
			this.getInfo(this.userCrowdId)
		}
		this.getCrowds()
	}
	closeSelf() {
		this.$emit('close')
	}
	async getCrowds() {
		const projectId = localStorage.getItem('productId') || ''
		await lookLikeCrowdList(projectId).then(res => {
			const { data } = res
			this.crowds = data
		})
	}
	idChange() {
		console.log()
	}
	async downloadTemplate() {
		await downloadLLTemplate().then((res: any) => {
			let text = res
			let a = document.createElement('a')
			a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)
			a.download = '上传种子人群的模板'
			document.body.appendChild(a)
			a.click()
			document.body.removeChild(a)
		})
	}
	beforeUpload(file: File) {
		const { type } = file
		if (type !== 'text/plain') {
			this.$notify.warning({
				message: '请上传txt格式的模板文件'
			})
			return false
		}
		this.form.uploadFile = file
		return false
	}
	removeFile() {
		this.form.uploadFile = null
	}
	errorType() {
		this.$notify.warning({
			message: '请选择txt格式的文件'
		})
	}
	onSubmit() {
		this.form.projectId = localStorage.getItem('productId')
		this.form.ll_type = this.form.llType
		const params = this.transFormdata(this.form)
		const formRef: any = this.$refs['form']
		formRef.validate((valid: any) => {
			if (valid) {
				this.loading = true
				if (this.operateType === 'create') {
					lookLikeCrowd(params)
						.then(res => {
							const { code, message } = res
							if (code === 200) {
								this.$notify.success({
									message: '保存成功!'
								})
								this.closeSelf()
								this.$emit('handleRefresh')
							} else {
								this.$notify.warning({
									message
								})
							}
						})
						.finally(() => {
							this.loading = false
						})
				}
				if (this.operateType === 'edit') {
					this.editSaveParmas.crowdName = this.form.crowdName
					userCrowdSave(this.editSaveParmas)
						.then((res: any) => {
							const { code, message } = res
							if (code == 200) {
								this.$notify.success({
									message: `保存成功！`
								})
								this.closeSelf()
								this.$emit('handleRefresh')
							} else {
								this.$notify.warning({
									message: message
								})
							}
						})
						.finally(() => {
							this.loading = false
						})
				}
			}
		})
	}
	transFormdata(form: any) {
		let formData = new FormData()
		Object.keys(form).forEach((key: string) => {
			formData.append(key, form[key])
		})
		return formData
	}
	async getInfo(id: string | number) {
		await getUserCrowdInfo(id).then(res => {
			const { data } = res
			Object.keys(this.form).forEach(key => {
				this.form[key] = data[key] || ''
			})
			this.editSaveParmas = {
				id: res.data.id,
				projectId: res.data.projectId,
				crowdName: '',
				showName: res.data.showName
			}
		})
	}
}
</script>

<style lang="scss" scoped>
.tip-icon {
	margin-right: 8px;
}
.disabled {
	pointer-events: none;
	opacity: 0.6;
}
.oper-form {
	height: 100%;
	.a-form-model {
		height: 100%;
	}
}
.step-wrap {
	::v-deep label::after {
		content: '';
	}
	.step1 {
		display: flex;
		align-items: center;
		.step-load {
			margin-left: 100px;
			cursor: pointer;
			.anticon-file-sync {
				color: $blue;
				font-size: 36px;
			}
			.load-text {
				display: inline-block;
				margin-left: 4px;
				color: $blue;
				text-decoration: underline;
			}
		}
	}
}
.out-number {
	display: flex;
	align-items: center;
}
.footer-btn {
	padding-top: 30px;
	display: flex;
	justify-content: flex-end;
	.cancel-btn {
		margin-right: 8px;
	}
}
</style>
